<script lang='tsx' name='Recommend' setup>
import * as $api from '@/api'
import { type BannerItem, ClientType } from "@/types";

const banners = ref<BannerItem[]>([])
$api.bannerApi(ClientType.pc).then(res => {
    banners.value = res.banners
})

</script>

<template>
    <div class='recommend-container'>
        <div class="banner-wrapper">
            <el-carousel height="100%" motion-blur trigger="click">
                <el-carousel-item v-for="item in banners" :key="item.targetId">
                    <img :src="item.imageUrl" class="banner-img" h-full w-full>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div m-t-34px flex flex-col flex-items-center>
            <ZoneTitle title="推荐歌单" :more="true"></ZoneTitle>
            <div class="song-card-warpper" m-t-20px>
                <SongCard title="歌单ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"
                    :tip="item.toString() + '标题标题'" v-for="item in 9"></SongCard>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.recommend-container {
    .banner-wrapper {
        margin: 0 auto;
        width: 40%;
        min-width: 500px;
        aspect-ratio: 27 / 10;

        .banner-img {
            border-radius: 8px;
        }
    }

    .song-card-warpper {
        max-width: 100%;
        overflow-x: auto;
        @include flex-item-center();
        @include no-scrollbar();
        gap: 22px;

    }
}
</style>
<style lang='scss' scoped>
.el-carousel.el-carousel--horizontal {
    height: 100%;
}

.el-carousel {
    --el-carousel-indicator-height: 10px;
    --el-carousel-indicator-width: 10px;
    border-radius: 8px;
}

:deep(.el-carousel__button) {
    border-radius: 50%;
}
</style>
